<script setup lang="ts">
import { NCard, NSpace, NH3 } from "naive-ui";
import { defineProps, useSlots } from "vue";

interface IProps {
  title: string;
}

const slots = useSlots();

const props = defineProps<IProps>();

const titleClass = {
  "tw-mt-4": !!slots.icon,
};
</script>

<template>
  <NCard
    hoverable
    bordered
    class="tw-border-gray-200 tw-shadow-lg tw-rounded-3xl tw-cursor-pointer tw-py-6 hover:tw-border-primary-default hover:tw-text-primary-default"
  >
    <NSpace vertical>
      <slot name="icon"></slot>
      <NSpace justify="center">
        <NH3 class="tw-m-0" :class="titleClass">{{ props.title }}</NH3>
      </NSpace>
    </NSpace>
  </NCard>
</template>

<style scoped></style>
